<template>
  <a-drawer
    v-model:visible="visible"
    class="custom-class"
    style="color: red"
    :title="title"
    placement="right"
    :maskClosable="true"
    @after-visible-change="afterVisibleChange"
  >
    <slot></slot>
    <template #footer>
      <a-button style="margin-right: 8px" @click="onClose">Cancel</a-button>
      <a-button type="primary" @click="onSubmit">提交</a-button>
    </template>
  </a-drawer>
</template>
<script lang="ts" setup>

const props = defineProps({
  title: String,
  modelValue: Boolean // visible
})

// 定义自定义事件 更新数据
const emit = defineEmits(['update:modelValue'])

// 组件自己的visible
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const afterVisibleChange = (bool: boolean) => {
  console.log('visible', bool)
  emit('update:modelValue', bool)
}

const onClose = () => {
  visible.value = false
}

const onSubmit = () => {
  console.log('提交')
}
defineExpose({
  onSubmit
})
</script>
